<template>
  <div class="miao">
    <div class="top">
      <div>京东秒杀</div>
      <van-count-down>
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <p class="right">爆款轮番秒</p>
    </div>
    <div>
      <ul>
        <li v-for="(v, index) in list" :key="index">
          <img :src="v.src" alt="" />
          <p>{{ v.price }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: "https://m.360buyimg.com/seckillcms/jfs/t1/78507/16/20538/399353/62d4c4d2E1d2a5f7d/8198eb6f39e0059d.jpg",
          price: "￥9.9",
        },
        {
          src: "https://m.360buyimg.com/seckillcms/jfs/t1/113853/17/30636/97278/63bd06e9F9c24dcf0/2694f8714e68e73a.jpg",
          price: "￥10.9",
        },

        {
          src: "https://m.360buyimg.com/seckillcms/jfs/t1/156100/4/34012/239832/63be22b9Ff1e243eb/fac5a8f0bb89dffd.png",
          price: "￥92.9",
        },
        {
          src: "https://m.360buyimg.com/seckillcms/jfs/t1/190999/25/30987/142389/63bba955F1b2d79d9/420bcb10bbd5b33c.jpg",
          price: "￥39.9",
        },
        {
          src: "https://m.360buyimg.com/seckillcms/jfs/t1/33852/29/19049/74010/63bedda1F206b7014/3ae419c78b837e8a.jpg",
          price: "￥39.9",
        },
        {
          src: "https://m.360buyimg.com/seckillcms/jfs/t1/109894/27/33713/50133/63998a23E932f8670/49ecbc619213d7ad.jpg",
          price: "￥49.9",
        },
      ],
    };
  },
};
</script>
<style scoped>
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin: 5px;
}

img {
  width: 55px;
  height: 55px;
}
p {
  color: red;
  font-size: 14px;
  text-align: center;
}
.top {
  display: flex;
  padding: 0 4px;
}
.right {
  margin-left: 140px;
}
</style>
